import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
declare var layui: any;
declare var $: any;

@Component({
  selector: 'app-cp-city',
  templateUrl: './cp-city.component.html',
  styleUrls: ['./cp-city.component.scss']
})
export class CpCityComponent implements OnInit {

  constructor() { }

  @Output() private outer = new EventEmitter();
  @Input() module: any;
  @Input() data: any;
  @Input() title: any;
  @Input() addressName: any;
  @Input() class: any;
  @Input() css: any;
  @Input() iid: any;
  @Input() disabled: any;

  style = {};
  ngOnInit() {
    this.addressName = this.addressName === undefined ? 'address' : this.addressName;
    this.disabled = this.disabled === undefined ? this.data + '_dis' : this.disabled;
    this.ngCss();
    this.xcity();
  }

  ngCss() {
    if (this.css) {
      var cssList = this.css.split(';');
      for (var i = 0; i < cssList.length; i++) {
        var cssParm = cssList[i].split(':');
        this.style[cssParm[0]] = cssParm[1];
      }
    }
  }

  xcity() {
    layui.use(['table',  'form', 'laydate'], (obj) => {
      var form = layui.form;
      $(this.module['componentName'] + ' #start').xcity();
      // $('#start').xcity('广东','广州市','东山区');
      /**
       * 监听区县元素变化
       */
      $(this.module['componentName'] + ' select[lay-filter=area]').bind('DOMNodeInserted', (e) => {
        this.module[this.data]['province'] = $('select[lay-filter=province] option:selected').text();
        this.module[this.data]['city'] = $('select[lay-filter=city] option:selected').text();
        this.module[this.data]['district'] = $('select[lay-filter=area] option:selected').text();
        this.module[this.data]['address'] = this.module[this.data]['province'] + this.module[this.data]['city'] + this.module[this.data]['district'];
      })
      /**
       * 插件中区县选择数据后相应字段赋值
       */
      form.on(this.module['componentName'] + ' select(area)', (data) => {
        this.module[this.data]['province'] = $(data.elem).parents('.x-city').find('select[lay-filter=province]').val();
        this.module[this.data]['city'] = $(data.elem).parents('.x-city').find('select[lay-filter=city]').val();
        this.module[this.data]['district'] = data.value;
        this.module[this.data]['address'] = this.module[this.data]['province'] + this.module[this.data]['city'] + this.module[this.data]['district'];
      });
      $(this.module['componentName'] + ' #start').xcity(this.module[this.data]['province'], this.module[this.data]['city'], this.module[this.data]['district']);
      // this.open_dis()
      if (this.module.utilService.isState[this.module.privIds] != -1) {
        this.module.noEditFile()
      } else {
        this.module.open_dis()
      }
    });
  }

  //移除省市区禁用
  remove_dis() {
    layui.use([  'form'], (obj) => {
      var form = layui.form 
      $("app-purchaser #start .province select").removeAttr("disabled")
      $("app-purchaser #start .city select").removeAttr("disabled")
      $("app-purchaser #start .district select").removeAttr("disabled")
      form.render('select');
    });
  }
  //开启省市区禁用
  open_dis() {
    layui.use(['table',  'form', 'laydate'], (obj) => {
      var form = layui.form;
      $("app-purchaser #start .province select").attr("disabled", "disabled")
      $("app-purchaser #start .city select").attr("disabled", "disabled")
      $("app-purchaser #start .district select").attr("disabled", "disabled")
      $('app-purchaser #start').xcity(this.module[this.data]['province'], this.module[this.data]['city'], this.module[this.data]['district']);
      form.render('select');
    });
  }

}
